<template>
	<view class="page">
		<view class="fillInfor-contents">
			<view margin="0 15px 20px" padding="0" v-for="(items, indexs) in list" :key="indexs">
				<u-cell :border="false">
					<view slot="title" class="u-slot-title" style="font-size: 32rpx;">
						{{items.id}}.{{items.question}}
					</view>
				</u-cell>
				<block v-if="!items.is_choose">

					<u-radio-group v-model="radiovalue1[indexs]" placement="column" iconPlacement="left"
						@change="groupChange($event,indexs)">
						<u-radio labelSize="16" activeColor="#B82441" :customStyle="{ margin: '15px' }"
							v-for="(item, index) in items.option" :key="index" :label="item.key+'.'+item.value"
							:name="item.key"></u-radio>
					</u-radio-group>
				</block>

				<block v-else>
					<u-checkbox-group v-model="radiovalue1[indexs]" shape="circle"  activeColor="#B82441" placement="column" iconPlacement="left" @change="groupChange($event,indexs)">
						<u-checkbox :customStyle="{margin: '15px'}" v-for="(item, index) in items.option"
							:key="index" :label="item.key+'.'+item.value" :name="item.key">
						</u-checkbox>
					</u-checkbox-group>
				</block>
			</view>
		</view>

		<view class="bottom-btn" @click="sure">
			提交
		</view>

		<fu-popup v-model="isShow" mode="center" border-radius="16" :mask-close-able="false">
			<view class="sure-box" v-if="score">
				<text class="cuIcon-close text-bold close" style="font-size: 40rpx;" @click="close"></text>
				<view class="flex align-center flex-direction">
					<view class="text-bold text-333 text-center"
						style="width: 100%;margin-top: 40rpx;font-size: 48rpx;">
						恭喜获得
					</view>
					<!-- <image :src="imgBaseUrl+'activity/jf.png'" mode=""
						style="width: 164rpx;height: 164rpx;margin-top: 32rpx;"></image> -->
					<text class="text-bold" style="font-size: 32rpx;">{{score}}积分</text>
					<text class="text-666" style="margin-top: 24rpx;">可前往至"积分商城"查看</text>
					<view class="btn" @click="toJf" data-url="/pages/integral/integralgoods/integral-goods-list/index">
						前往积分商城
					</view>
				</view>

			</view>

			<view class="sure-box" v-else>
				<text class="cuIcon-close text-bold close" style="font-size: 40rpx;" @click="close"></text>
				<view class="flex align-center flex-direction">
					<view class="text-bold text-333 text-center"
						style="width: 100%;margin-top: 40rpx;font-size: 48rpx;">
						恭喜获得
					</view>
					<image :src="imgBaseUrl+'activity/jf.png'" mode=""
						style="width: 164rpx;height: 164rpx;margin-top: 32rpx;"></image>
					<text class="text-bold" style="font-size: 32rpx;">{{score}}积分</text>
					<text class="text-666" style="margin-top: 24rpx;">可前往至"我的优惠券"查看</text>
					<view class="btn" @click="toJf" data-url="/pages/user/coupon/my-coupon/index">
						查看优惠券
					</view>
				</view>

			</view>
		</fu-popup>

		<fu-notwork></fu-notwork>
	</view>
</template>
<script>
	import {
		BASE_URL
	} from '@/common/config.js';
	// import fuShareInvite from '../../components/fu-share-invite/fu-share-invite.vue';
	export default {
		// components: {
		// 	fuShareInvite
		// },
		data() {
			return {
				userInfo: {},
				list: [],
				task_id: '',
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				radiovalue1: [],
				disabled: true,
				isShow: false,
				isShow1: false,
				score: 0,
				coupon: []
			};
		},


		onLoad(options) {
			this.task_id = options.task_id
			if (global.token) {
				this.getRenwuList()
			}

			console.log(this.radiovalue1)

		},

		onPullDownRefresh() {
			this.getRenwuList()
		},

		methods: {
			toJf() {
				uni.redirectTo({
					url: '/pages/integral/integralgoods/integral-goods-list/index'
				})
			},
			close() {
				this.isShow = false

				uni.navigateBack({

				})
			},
			goFill() {
				//   uni.$u.route("/pagesMy/FillInfor/FillInfor");
			},
			reset() {
				this.radiovalue1 = [];
				this.disabled = true;
			},
			isEmpty(obj) {
				const q = Array.from(obj);
				for (var key in q) {
					if (q[key] === undefined) return true;
				}
				return false;
			},
			groupChange(res, indexs) {
				// 有空值||最大长度不相等
				if (
					this.isEmpty(this.radiovalue1) ||
					this.radiovalue1.length !== this.list.length
				) {
					const radiovalue1 = this.radiovalue1.filter((d) => d);
					const n = this.list.length - radiovalue1.length;
					console.log("没答完，还有", n, "道");
				} else {
					console.log("答完了");
					this.disabled = false;
				}


				this.list[indexs].option.forEach((item, index) => {
					item.is_choose = 0
					console.log(res)
					if(typeof(res)=='string'){
						if (item.key == res) {
							console.log('这里')
							item.is_choose = 1
						} 
					}else{
						res.forEach(items=>{
							if (item.key == items) {
								console.log('这里')
								item.is_choose = 1
							} 
						})
					}
					
				})


				console.log(this.list)

			},
			hadleCopy(content) {
				uni.setClipboardData({
					data: content,
					success: () => {
						this.$message.success(this.i18n['复制成功'])
					}
				});
			},
			// 打开弹窗
			openPopup() {
				this.$refs.share.open();
			},
			// 返回
			back() {
				uni.navigateBack();
			},



			sure() {
				if (this.disabled) {
					return this.$message.info('您有未选择的题目')
				}
				this.$api.post(global.apiUrls.addQuestionnaire, {
					result: JSON.stringify(this.list),
					task_id: this.task_id
				}).then(res => {
					console.log(res);
					res = res.data;
					if (res.code == 1) {
						// this.$message.info(res.msg)
						this.postGoodsTaskReward()
					} else {
						this.$message.info(res.msg)
					}

				})
			},
			getRenwuList() {
				this.$api.post(global.apiUrls.questionnaireDetail, {
					task_id: this.task_id,
					page: 1,
					list_rows: 100
				}).then(res => {
					console.log(res);
					res = res.data;
					if (res.code == 1) {
						this.list = res.data.data
					}
				})
			},

			postGoodsTaskReward() {
				console.log('dddddfff')
				this.$api.post(global.apiUrls.goodsTaskReward, {
					task_id: this.task_id
				}).then(res => {
					if (res.data.code == 1) {
						this.isShow = true
						this.score = res.data.data.score
						this.coupon = res.data.data.coupon
						this.isShow = true
						// if(this.score){
						// 	this.isShow = true
						// }else{
						// 	this.isShow1 = true
						// }
						this.$message.info(res.data.msg)
					}
				})
			},

			toDetail(item) {
				if (item.sign != '1') {
					this.$urouter.navigateTo({
						url: '/pages/goods/goodsdetail/goods-detail/index',
						params: {
							sku_id: item.sku_id || 0,
							goods_id: item.goods_id,
							sign_time: item.sign_time,
							task_id: item.id
						}
					});
				} else {

				}

			}


		},

	};
</script>
<style lang="scss" scoped>
	button {
		background: #FFFFFF;

		&:after {
			border: none;
		}

		.margin-top-xs {
			margin-top: 0;
			height: 44rpx;
		}
	}

	page {
		background: #ffffff;
	}

	.page {
		width: 100%;
		// height: calc(100vh - 90rpx);
		overflow: hidden;
		background: #ffffff;
		padding-bottom: 200rpx;


		.page-wrap {
			margin-left: 24rpx;
			margin-right: 24rpx;

			.code-bg {
				position: relative;
				background: #FFFFFF;
				border-radius: 24rpx;
				padding: 40rpx 32rpx;

				.scancode {
					position: absolute;
					bottom: 94rpx;
					left: 0;
					right: 0;
					margin: auto;
				}

				.input-code {
					position: absolute;
					right: 0;
					top: 32rpx;
					border-top-left-radius: 28rpx;
					border-bottom-left-radius: 28rpx;
				}
			}

		}

		.opacity-box {
			width: 80%;
			margin: 0 auto;
			left: 10%;
			height: 719rpx;
			background: rgba(255, 255, 255, 0.14);
			border-radius: 24rpx;
			position: fixed;
			z-index: 2;
			bottom: 300rpx;
		}

		.scancode {
			padding: 15rpx;
			width: 300rpx;
			height: 300rpx;
			border-radius: 10rpx;
			background-color: white;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.bottom {
			width: 60%;
			height: 30%;

			.cu-btn {
				&:first-child {
					background: #FFFFFF;
					color: #333333;
				}

				&:last-child {
					background: $theme;
					color: #FFFFFF;
				}
			}

		}

	}

	.title {
		font-size: 36rpx;
		font-family: PingFang SC-Semibold, PingFang SC;
		font-weight: bold;
		color: #000000;
		line-height: 39rpx;
		margin-bottom: 48rpx;

	}

	.btnbg {
		width: 138rpx;
		height: 50rpx;
		background: linear-gradient(270deg, #FF3734 0%, #FF8000 100%);
		box-shadow: 1rpx 1rpx 12rpx 1rpx rgba(255, 58, 52, 0.44);
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		opacity: 1;
		text-align: center;
		line-height: 50rpx;
		color: #ffffff;
	}

	.btnbg1 {
		width: 138rpx;
		height: 50rpx;
		background: #f8f8f8;
		// box-shadow: 1rpx 1rpx 12rpx 1rpx rgba(255,58,52,0.44);
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		opacity: 1;
		text-align: center;
		line-height: 50rpx;
		color: #333333;
	}

	.list-item {
		margin-bottom: 57rpx;
	}

	.bottom-btn {
		// width: 686px;
		position: fixed;
		left: 32rpx;
		right: 32rpx;
		height: 88rpx;
		background: #B82441;
		border-radius: 44rpx;
		opacity: 1;
		text-align: center;
		line-height: 88rpx;
		color: #ffffff;
		bottom: 50rpx;
	}

	.sure-box {
		width: 600rpx;
		height: 680rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		opacity: 1;
		padding: 32rpx;
	}

	.close {
		position: absolute;
		right: 32rpx;
	}

	.btn {
		width: 252rpx;
		height: 88rpx;
		background: #F1F1F1;
		border-radius: 8rpx;
		opacity: 1;
		text-align: center;
		line-height: 88rpx;
		margin-top: 80rpx;
	}
</style>
